<template>
    <div style="text-align:left;" v-loading="loading">
        <el-card>
            <span>当前状态</span>
            <el-divider></el-divider>
            <div class="xx-tags">
                <xx-tag title="总人数" :content="tagsInfo.totalNum"></xx-tag>
                <xx-tag title="已学人数" :content="tagsInfo.learnNum"></xx-tag>
                <xx-tag title="参学率" :content="tagsInfo.learnPre" :color="tagsInfo.learnPreColor"></xx-tag>
            </div>
        </el-card>
        <el-card>
            <span>未学名单</span>
            <el-divider></el-divider>
            <div class="el-tags">
                <el-tag v-for="(item, i) in noLearnNames" :key="i">{{item}}</el-tag>
            </div>
        </el-card>
        <el-card>
            <span>工具箱</span>
            <el-divider></el-divider>
            <div class="xx-tags">
                <el-button type="primary" @click="copyStatus">一键复制信息</el-button>
                <el-button type="primary" @click="copyUrgedMsg">生成催学信息</el-button>
                <el-button type="primary" @click="TimingReminder">{{btnTitle}}</el-button>
            </div>
        </el-card>

    </div>
</template>

<script>
import XxTag from '../../components/XxTag.vue'
import Mail from '../../api/index'
export default {
    data() {
        return {
            tagsInfo: {
                totalNum: 0,
                learnNum: 0,
                learnPre: 0
            },
            noLearnNames: [],
            btnTitle: '发送到邮箱',
            loading: true
        }
    },
    components: { XxTag },
    mounted() {
        this.calcNum()
    },
    methods: {
        async TimingReminder() {
            const prompt = await this.$prompt('请输入邮箱', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: '邮箱格式不正确'
            })
            const res = await this.axios(Mail.sendMail('', prompt.value, '智慧团建3.0智能统计', `
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>智慧团建3.0</title>
                </head>
                <body>
                    <div class="flex">
                        <h1>智慧团建3.0-邮件提醒</h1>
                        <h3>团员总人数：<span style="color:green;">${this.tagsInfo.totalNum}</span>人</h3>
                        <h3>已学人数：<span style="color:green;">${this.tagsInfo.learnNum}</span>人</h3>
                        <h3>未学名单</h3>
                        <p style="font-size: large;text-align: justify;">${this.noLearnNames}</p>
                        <h2>智慧团建3.0智能统计</h2>
                    </div>
                </body>
                <style>
                    .flex {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        max-width: 400px;
                    }
                </style>
                </html>
            `))
            if (res.data.response == '250 OK: queued as.') {
                this.$message({
                    message: '发送成功,请注意查收',
                    type: 'success'
                })
            } else {
                this.$message({
                    message: '发送失败',
                    type: 'warning'
                })
            }
            console.log(res)
        },
        copyStatus() {
            const message = `团员总人数：${this.tagsInfo.totalNum}人，已学人数：${this.tagsInfo.learnNum}人，未学名单：${this.noLearnNames}。  ——智慧团建3.0智能统计`
            this.copy(message)
        },
        copyUrgedMsg() {
            const message = `各位同学好呀，现在我们班参学率才${this.tagsInfo.learnPre}，没有达到要求。还没学习的同学，请尽快完成哦~，未学名单：${this.noLearnNames}。  ——智慧团建3.0智能统计`
            this.copy(message)
        },
        copy(content) {
            const oInput = document.createElement('input')
            oInput.value = content
            document.body.appendChild(oInput)
            oInput.select() // 选择对象;
            console.log(oInput.value)
            document.execCommand('Copy') // 执行浏览器复制命令
            this.$message({
                message: '复制成功',
                type: 'success'
            })
            oInput.remove()
        },
        async calcNum() {
            const allNames = await this.getMemberNames(this.$store.state.oid, this.$store.state.cookie)
            const learnNames = await this.getLearnNames(this.$store.state.oid, 1, this.$store.state.token)
            const noLearnNames = allNames.filter(e => learnNames.indexOf(e) == -1)
            const learnPre = (parseFloat((learnNames.length / allNames.length)) * 100).toFixed(3)
            if (learnPre < 50) { this.tagsInfo.learnPreColor = 'red' } else { this.tagsInfo.learnPreColor = 'green' }
            this.tagsInfo.learnPre = learnPre + '%'
            this.tagsInfo.totalNum = allNames.length
            this.tagsInfo.learnNum = learnNames.length
            this.noLearnNames = noLearnNames
            this.loading = false
        },
        async getMemberNames() {
            const res = await fetch('https://tuanapi.12355.net/api/v1/admin/members/page', {
                headers: {
                    accept: 'application/json, text/javascript, */*; q=0.01',
                    'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
                    authorize_name: this.$store.state.oid,
                    'cache-control': 'no-cache',
                    'content-type': 'application/json',
                    pragma: 'no-cache',
                    'sec-ch-ua': '"Chromium";v="92", " Not A;Brand";v="99", "Microsoft Edge";v="92"',
                    'sec-ch-ua-mobile': '?0',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-site',
                    Cookie: this.$store.state.cookie
                },
                referrer: 'https://tuan.12355.net/',
                referrerPolicy: 'strict-origin-when-cross-origin',
                body: '{"name":"","auditStatus":"","rewardStatus":"","deletedState":"","mobile":"","disabled":"","developmentMemberNumber":"","leagueForYears":"","volunteerServiceHoursForYear":"","page":1,"pageSize":100}',
                method: 'POST',
                mode: 'cors',
                credentials: 'include'
            })
            const temp = await res.json()
            return temp.listData.map((e) => { return e.name })
        },
        async getLearnNames(oid, page = 1, token) {
            const res = await fetch(`https://youthstudy.12355.net/apibackend/admin/young/organize/userList?organizedId=${oid}&pageNo=` + page + '&pageSize=100', {
                headers: {
                    accept: 'application/json, text/plain, */*',
                    'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
                    'cache-control': 'no-cache',
                    pragma: 'no-cache',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-origin',
                    'x-litemall-admin-token': token,
                    'x-litemall-identification': 'young'
                },
                referrer: 'https://youthstudy.12355.net/backend/',
                referrerPolicy: 'strict-origin-when-cross-origin',
                body: null,
                method: 'GET',
                mode: 'cors',
                credentials: 'include'
            })
            const data = await res.json()
            return data.data.list.map((e) => { return e.name })
        }
    }
}
</script>

<style lang='less'>
.xx-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.el-tags {
    .el-tag {
        margin: 5px;
    }
}
.el-card {
    margin: 10px;
}
</style>
